<template>
  <div class="TopRight">
    <div class="titlestyle"><i class="el-icon-time iconstyle" />渠道订单实时监控</div>
    <div class="TopRightcontent">
      <div>
        <div>JDDJ</div>
        <div>{{ thetoprightinfo.totleJDDJ }}</div>
        <div>
          <span>已完成</span>
          <span class="spanstyle">{{ thetoprightinfo.JDDJalready }}</span>
          <span>已取消</span>
          <span class="spanstyle">{{ thetoprightinfo.JDDJcancle }}</span>
        </div>
      </div>
      <div>
        <div>WMDJ</div>
        <div>{{ thetoprightinfo.totleWMDJ }}</div>
        <div>
          <span>已完成</span>
          <span class="spanstyle">{{ thetoprightinfo.WMDJalready }}</span>
          <span>已取消</span>
          <span class="spanstyle">{{ thetoprightinfo.WMDJcancle }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'TopRight',
  components: {},
  props: {
    thetoprightinfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'position',
      'storeId',
      'userId',
      'name'
    ])
  },
  created() {

  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss">
  .TopRight {
    .titlestyle {
      padding-left: 20px;
      font-size: 16px;
      font-weight: bold;
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid lightgray;
    }

    .iconstyle {
      font-size: 20px;
      font-weight: bold;
      margin-right: 10px;
    }

    .TopRightcontent {
      display: flex;
      width: 100%;
      height: 150px;
    }

    .TopRightcontent > div {
      margin-left: 10%;
      margin-top: 20px;
      flex: 1;
    }

    .TopRightcontent > div > div:nth-child(1) {
      font-size: 16px;
      color: gray;
    }

    .TopRightcontent > div > div:nth-child(2) {
      margin-top: 20px;
      font-weight: bold;
      font-size: 30px;
    }
    .TopRightcontent > div > div:nth-child(3) {
      margin-top: 20px;
    }

    .spanstyle {
      display: inline-block;
      width: 100px;
      font-size: 16px;
      font-weight: bold;
    }
  }
</style>
